<template>
	<view>
		<!-- 列表没数据显示 -->
		<template v-if="searchList.length === 0">
			<view class="flex justify-between">
				<view class="px-2">搜索历史</view>
				<view class="px-2 text-light-muted" @click="clearStory">清空历史</view>
			</view>
			<view class="flex align-center flex-wrap">
				<view v-for="(item, index) in historyList" @longpress="even" :key="index" class="mx-2 my-1 border rounded px-2 position-relative" hover-class="bg-light">
					<text @click="clickEven(item)">{{ item }}</text>
					<text v-if="remove" @click="removeitem(index)" class="iconfont icon-cancel-test position-absolute" style="top: -20rpx; right: -20rpx"></text>
				</view>
			</view>
		</template>

		<template v-else>
			<view v-for="(item, index) in searchList" :key="index">
				<template v-if="type === '帖子'">
					<list :userId="userId" :item="item" :index="index" :isSpace="true" :isDetail="true"></list>
				</template>
				<template v-else-if="type === '好友'">
					<friendlist :item3="item" :index="index"></friendlist>
				</template>
				<template v-else>
					<topicList :item="item" :index="index"></topicList>
				</template>
			</view>
			<loadmore v-if="searchList.length > 9" :loadmore="loadmore"></loadmore>
		</template>
	</view>
</template>

<script>
import list from '@/compoment/IndexCommen/list.vue';
import friendlist from '@/compoment/user-list/friendlist.vue';
import topicList from '../../compoment/news/topicList.vue';
import { searchUser, SearchTopic, SearchPost } from '@/request/Api/seach.js';

export default {
	data() {
		return {
			inputtext: '',
			searchList: [],
			historyList: [],
			type: '搜索帖子',
			page: 1,
			loadmore: '上拉加载更多',
			remove: false,
			userId: 0
		};
	},
	onLoad(e) {
		this.type = e.type;
		const list = uni.getStorageSync('history'+this.type);
		if (list) {
			this.historyList = JSON.parse(list);
		}
		const userinfo = uni.getStorageSync('userInfo');
		this.userId = userinfo.id;
	},
	onUnload() {
		uni.$off('followOrdosupport', (res) => {});
	},
	// 上拉加载
	onReachBottom() {
		if (this.type === '好友') {
			this.page++;
			this.searchUserList(false);
		} else if (this.type === '帖子') {
			this.page++;
			this.SearchPostList(false);
		} else {
			this.page++;
			this.searchTopicList(false);
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.searchList.length === 0) {
			uni.stopPullDownRefresh();
		} else {
			this.searchEvent(true, true);
		}
	},
	components: {
		list,
		friendlist,
		topicList
	},
	onReady() {
		// 改变输入框中的placeholder属性
		//这个属性只能App端使用，pc端无效
		// #ifdef APP-PLUS
		let webView = this.$mp.page.$getAppWebview();
		let tn = webView.getStyle().titleNView;
		tn.searchInput.placeholder = '搜索' + this.type;
		webView.setStyle({
			titleNView: tn
		});
		// #endif
	},
	methods: {
		even() {
			this.remove = true;
		},
		removeitem(index) {
			this.historyList.splice(index, 1);
		},
		clearStory() {
			uni.showModal({
				title: '确定要清空吗',
				cancelText: '取消',
				confirmText: '确认',
				success: (res) => {
					if (res.confirm) {
						uni.clearStorageSync();
						this.historyList = [];
					}
				}
			});
			uni.clearStorageSync();
		},
		//点击搜索历史
		clickEven(text) {
			this.inputtext = text;
			this.searchEvent(true);
		},
		// 搜索事件
		searchEvent(issuaxin, PullRefresh) {
			this.SaveHistoryList(this.type);
			//先隐藏键盘
			uni.hideKeyboard();
			//发起请求
			uni.showLoading({
				mask: true
			});

			if (this.type === '帖子') {
				this.SearchPostList(issuaxin, PullRefresh);
				uni.$on('followOrdosupport', (res) => {
					if (res.type === 'follow') {
						this.searchList.forEach((item) => {
							if (item.userId === parseInt(res.userId)) {
								item.isFollow = res.num;
							}
						});
					} else {
						this.dosupport({
							id: res.id,
							num: res.num
						});
					}
				});
				uni.$on('commentCount', (res) => {
					this.searchList.forEach((v) => {
						if (v.id === res.id) {
							v.commentCount = res.num;
						}
					});
				});
			} else if (this.type === '好友') {
				this.searchUserList(issuaxin, PullRefresh);
				uni.$on('followOrdosupport', (res) => {
					this.searchList.forEach(item=>{
						if(item.followId === res.userId){
								item.isFollow = res.num
							}
					})
				});
			} else {
				this.searchTopicList(issuaxin, PullRefresh);
			}
		},
		
		//顶踩
		dosupport(e) {
			let item = '';
			this.searchList.forEach((v) => {
				if (v.id === e.id) {
					item = v;
				}
			});
			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		},
		searchUserList(issuaxin, PullRefresh) {
			if (!issuaxin) {
				if (this.loadmore !== '上拉加载更多') return;
				this.loadmore = '加载中....';
			} else {
				this.page = 1;
			}
			const userinfo = uni.getStorageSync('userInfo')
			searchUser({
				nickName: this.inputtext,
				current: this.page,
				userId:userinfo.id,
				isLogin:userinfo?true:false
			}).then((res) => {
				if (res.data.length === 0 && issuaxin) {
					uni.showToast({
						title: '没有相关类容哦，亲',
						icon: 'none'
					});
				}
				let list = res.data.map((item) => {
					return {
						age: item.userinfo.age,
						nickName: item.nikeName,
						userpic: item.userpic,
						isFollow: item.isFollow,
						followId:item.userinfo.userId,
						sex: item.userinfo.sex // 0未知 1女 2男
					};
				});
				this.searchList = issuaxin ? list : [...this.searchList, ...list];
				if (res.data.length < 10) {
					this.loadmore = '没有更多了';
				} else {
					this.loadmore = '上拉加载更多';
				}
				uni.stopPullDownRefresh();
			});
		},
		searchTopicList(issuaxin, PullRefresh) {
			
			if (!issuaxin) {
				if (this.loadmore !== '上拉加载更多') return;
				this.loadmore = '加载中....';
			} else {
				this.page = 1;
			}

			SearchTopic({
				topicName: this.inputtext,
				current: this.page
			}).then((res) => {
				if (res.data.length === 0 && issuaxin) {
					uni.showToast({
						title: '没有相关类容哦，亲',
						icon: 'none'
					});
				}
				let list = res.data.map((item) => {
					return {
						id: item.id,
						type: item.type,
						topicClassId: item.topicClassId,
						titlepic: item.titlepic,
						title: item.title,
						description: item.description,
						dynamic: item.postCount,
						todayPostCount: item.todayPostCount
					};
				});
				this.searchList = issuaxin ? list : [...this.searchList, ...list];
				if (res.data.length < 10) {
					this.loadmore = '没有更多了';
				} else {
					this.loadmore = '上拉加载更多';
				}

				uni.stopPullDownRefresh();
			});
		},
		SearchPostList(issuaxin) {
			if (!issuaxin) {
				if (this.loadmore !== '上拉加载更多') return;
				this.loadmore = '加载中....';
			} else {
				this.page = 1;
			}

			SearchPost({
				title: this.inputtext,
				current: this.page,
				userId: this.userId
			}).then((res) => {
				if (res.data.length === 0 && issuaxin) {
					uni.showToast({
						title: '没有相关类容哦，亲',
						icon: 'none'
					});
				}
				let list = res.data.map((item) => {
					return {
						id: item.id,
						userId: item.userId,
						userpic: item.user.userpic,
						nikeName: item.user.nikeName,
						createTime: item.createTime,
						isFollow: item.isFollow,
						title: item.title,
						titlepic: item.titlepic,
						supportVo: item.supportVo,
						commentCount: item.commentCount,
						sharenum: item.sharenum
					};
				});

				this.searchList = issuaxin ? list : [...this.searchList, ...list];

				if (res.data.length < 10) {
					this.loadmore = '没有更多了';
				} else {
					this.loadmore = '上拉加载更多';
				}
				uni.stopPullDownRefresh();
			});
		},
		onNavigationBarSearchInputChanged(e) {
			this.inputtext = e.text;
		},
		//获取点击搜索事件，这里是获取根据索引来判断点击哪个导航栏的按钮
		onNavigationBarButtonTap(e) {
			// 这里就是点击了搜索
			if (e.index === 0) {
				this.searchEvent(true, false);
			}
		},

		//这里是用户点击了手机上键盘的搜索时触发
		onNavigationBarSearchInputConfirmed() {
			this.searchEvent(true, false);
		},
		SaveHistoryList(type) {
			if (this.inputtext === '' || this.inputtext === null) {
				return;
			}
			if (this.historyList.includes(this.inputtext)) {
				// 获取索引
				const index = this.historyList.indexOf(this.inputtext);
				this.historyList.splice(index, 1);
			}
			this.historyList.unshift(this.inputtext);
			uni.setStorageSync('history'+type, JSON.stringify(this.historyList));
		}
	}
};
</script>

<style></style>
